<template>
  <div id="svm">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="col col-1">
        <div class="row row-1">
          <div class="declare">
            <p class="ellipsis">作业地图</p>
          </div>
        </div>
        <div class="row row-2">
          <div id="leaflet" class="leaflet"></div>
          <div
            :class="velocityShow === 1 ? 'velocity active' : 'velocity'"
            @click="showVelocity()"
          ></div>
        </div>
      </div>
      <div class="col col-2">
        <div class="row row-1"></div>
        <div class="row row-2">
          <div class="row row-1">
            <p class="ellipsis">作业车辆列表</p>
          </div>
          <div class="row row-2">
            <div class="row">
              <vue-scroll :ops="ops">
                <div
                  v-for="item in vehicleArray"
                  :key="item.id"
                  :class="vehicleId === item.id ? 'row active' : 'row'"
                  @click="vehicleSelected(item.id)"
                >
                  <div class="row row-1">
                    <div class="col col-1">
                      <p>
                        <span class="license-plate">{{
                          formatterString(item.licensePlate)
                        }}</span>
                        <span
                          :class="
                            item.work === 1 ? 'state online' : 'state outline'
                          "
                          >{{ formatterVehicleState(item.work) }}</span
                        >
                        <span
                          v-if="
                            item.work !== 1 ||
                              item.clockIn !== 0 ||
                              item.outlineTip !== 0 ||
                              item.awayTip !== 0 ||
                              item.directionTip !== 0 ||
                              item.distanceTip !== 0 ||
                              item.humidityTip !== 0
                          "
                          class="warn"
                        ></span>
                      </p>
                    </div>
                    <div class="col col-2">
                      <p>{{ formatterString(item.countrySpot) }}</p>
                    </div>
                  </div>
                  <div class="row row-2">
                    <div class="col col-1">
                      <p>
                        {{ formatterString(item.nickname + item.username) }}
                      </p>
                    </div>
                    <div class="col col-2">
                      <p>
                        <span>作业时长：</span>
                        <span class="time">{{
                          formatterString(item.time, "分钟")
                        }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </vue-scroll>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-3">
        <div class="row row-1">
          <div class="declare">
            <p class="ellipsis">车辆详情</p>
          </div>
        </div>
        <div class="row row-2">
          <div class="col col-1">
            <div class="row row-1">
              <p class="license-plate">
                {{ formatterString(vehicleData.licensePlate) }}
              </p>
              <p class="lng-lat">
                经度：{{ vehicleData.videoLng }}&nbsp;&nbsp;&nbsp;&nbsp;纬度：{{
                  vehicleData.videoLat
                }}
              </p>
            </div>
            <div class="row row-2">
              <p class="text">
                <span
                  :class="
                    vehicleData.clockIn === 0
                      ? 'clock-in active'
                      : 'clock-in forget'
                  "
                  >{{ vehicleData.clockIn === 0 ? "已打卡" : "未打卡" }}</span
                >
                <span class="text">{{
                  formatterString(vehicleData.nickname + vehicleData.username)
                }}</span>
                <span class="text"
                  >作业时长：{{
                    formatterString(vehicleData.time, "分钟")
                  }}</span
                >
              </p>
              <p v-if="vehicleData.outline !== 0" class="warn">作业APP未开启</p>
              <p v-if="vehicleData.awayTip !== 0" class="warn">
                作业人员远离作业车辆
              </p>
            </div>
            <div class="row row-3">
              <div class="row">
                <p class="text">
                  作业方位：{{
                    vehicleData.countrySpot
                      ? vehicleData.countrySpot +
                        "-" +
                        formatterDirection(
                          vehicleData.directionAngle,
                          vehicleData.windSpeed
                        )
                      : "—"
                  }}
                </p>
                <p class="text">
                  风向：{{
                    formatterWindDirection(
                      vehicleData.windDirection,
                      vehicleData.windSpeed
                    )
                  }}
                </p>
                <p v-if="vehicleData.directionTip !== 0" class="warn">
                  未在上风口作业
                </p>
              </div>
              <div class="row">
                <p class="text">
                  作业位置：{{
                    vehicleData.countrySpot
                      ? vehicleData.countrySpot +
                        "-" +
                        vehicleData.distance +
                        "米"
                      : "—"
                  }}
                </p>
                <p class="text">
                  风速：{{ formatterString(vehicleData.windSpeed, "米/秒") }}
                </p>
                <p v-if="vehicleData.distanceTip !== 0" class="warn">
                  应在距国控点50-100米范围内作业
                </p>
              </div>
              <div class="row">
                <p class="text">
                  湿度：{{ formatterString(vehicleData.humidity, "%") }}
                </p>
                <p v-if="vehicleData.humidityTip !== 0" class="warn">
                  湿度已达临界值，应停止作业
                </p>
              </div>
            </div>
          </div>
          <div class="col col-2">
            <div class="row row-1">
              <div
                :class="item.class"
                v-for="(item, index) in vehicleVideoArray"
                :key="index"
              >
                <video
                  muted
                  :id="item.id"
                  class="video-js vjs-default-skin vjs-big-play-centered vjs-4-3 vehicle-video"
                  controls
                  preload="auto"
                  poster=""
                  data-setup="{}"
                >
                  <source :src="item.src" type="application/x-mpegURL" />
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "../../assets/leaflet/leaflet-velocity.css";
import "../../assets/leaflet/leaflet-velocity.js";
import stateStationIcon from "../../assets/img/20200413102959.png";
import gps from "../../utils/gps";
import utils from "../../utils/utils";
// vuescroll
import vuescroll from "vuescroll";
import "vuescroll/dist/vuescroll.css";

Vue.use(vuescroll);
import {
  getCityDistrict,
  getStateStationRealtime,
  getVehicleList,
  geCityDistrictVelocity
} from "../../axios/api";

export default {
  data() {
    return {
      ops: {
        bar: {
          keepShow: true,
          background: "#666"
        }
      },
      map: null,
      geoJSONGroup: null,
      stateStationGroup: null,
      vehicleGroup: null,
      vehicleArray: [],
      vehicleJsession: null,
      vehicleId: null,
      vehicleData: {},
      vehicleStateArray: [
        { label: "在线", value: 1 },
        { label: "离线", value: 0 }
      ],
      vehicleVideoArray: [],
      vehicleVideoInstanceArray: [],
      velocityShow: 0,
      velocityLayer: null,
      velocityData: [],
      vehicleInterval: null
    };
  },
  methods: {
    init() {
      getCityDistrict(data => {
        this.initMap(data);
        this.loadTileLayer();
        this.loadGeoJSON(data);
        getStateStationRealtime(data => {
          this.crateStateStationList(data);
        });
        getVehicleList(data => {
          this.vehicleArray = data.list;
          this.vehicleJsession = data.jsession;
          if (this.vehicleArray.length > 0) {
            this.vehicleId = this.getVehicleId();
            this.vehicleSelected(this.vehicleId);
          }
          // this.createMarkerList(data);
        });
        geCityDistrictVelocity({}, data => {
          this.velocityData = data;
        });
        this.intervalGetVehicleList();
      });
    },
    initMap(data) {
      this.map = L.map("leaflet", {
        center: [data.lat, data.lng],
        zoom: 13
      });
    },
    loadTileLayer() {
      L.tileLayer(
        "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          maxZoom: 18,
          minZoom: 9,
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          detectRetina: true
        }
      ).addTo(this.map);

      L.tileLayer(
        "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }
      ).addTo(this.map);
    },
    loadGeoJSON(data) {
      let layer = new L.geoJSON(JSON.parse(data.geojson), {
        coordsToLatLng: function(coords) {
          let wgs = gps.gcj02ToWgs84(coords[1], coords[0]);
          return L.CRS.EPSG4326.unproject(L.point(wgs.lng, wgs.lat));
        },
        style: {
          fillColor: "transparent",
          color: "#ff0"
        }
      });
      this.geoJSONGroup = new L.LayerGroup();
      this.geoJSONGroup.addLayer(layer);
      this.geoJSONGroup.addTo(this.map);
    },
    crateStateStationList(data) {
      this.stateStationGroup = new L.LayerGroup();
      data.forEach(item => {
        this.createStateStation(item);
      });
      this.stateStationGroup.addTo(this.map);
    },
    createStateStation(data) {
      let latLng = new L.LatLng(data.latitude, data.longitude);

      let icon = L.icon({
        iconUrl: stateStationIcon,
        iconSize: [16, 16],
        iconAnchor: [8, 8]
      });
      let iconMarker = new L.marker(latLng, { icon: icon });
      this.stateStationGroup.addLayer(iconMarker);

      let address = L.divIcon({
        html: `<p>${data.station}</p>`,
        className: "address",
        iconSize: [80, 25],
        iconAnchor: [40, -15]
      });
      let addressMarker = new L.marker(latLng, { icon: address });
      this.stateStationGroup.addLayer(addressMarker);

      let array500 = gps.getCircleLatLng(data.latitude, data.longitude, 0.5);
      let polygon500 = L.polygon(array500, {
        color: "#ff0000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon500);

      let array1000 = gps.getCircleLatLng(data.latitude, data.longitude, 1.0);
      let polygon1000 = L.polygon(array1000, {
        color: "#ff9000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon1000);

      let array3000 = gps.getCircleLatLng(data.latitude, data.longitude, 3.0);
      let polygon3000 = L.polygon(array3000, {
        color: "#ffc000",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon3000);

      let array10000 = this.gps.getCircleLatLng(
        data.latitude,
        data.longitude,
        10.0
      );
      let polygon10000 = L.polygon(array10000, {
        color: "#ffc000",
        dashArray: [5, 5],
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0
      });
      this.stateStationGroup.addLayer(polygon10000);
    },
    createMarkerList() {
      this.vehicleGroup = new L.LayerGroup();
      this.vehicleArray.forEach(item => {
        this.createVehicleMarker(item);
      });
      this.vehicleGroup.addTo(this.map);
    },
    createVehicleMarker(data) {
      console.log(this.vehicleId, data.id);
      let className =
        this.vehicleId === data.id
          ? "selected"
          : data.work === 1
          ? "online"
          : "outline";
      let zIndex =
        this.vehicleId === data.id ? 800 : data.work === 1 ? 700 : 600;
      let icon = L.divIcon({
        html: `<div class="container ${className}">
                <p>${this.formatterString(data.licensePlate)}</p>
                <div class="hornlike ${className}"></div>
              </div>`,
        className: "vehicle " + className,
        iconSize: [120, 30],
        iconAnchor: [60, 15]
      });
      let wgsLatLng = gps.bd09ToWgs84(data.videoLat, data.videoLng);
      let latLng = new L.LatLng(wgsLatLng.lat, wgsLatLng.lng);
      let marker = new L.marker(latLng, {
        icon: icon
      });
      marker.setZIndexOffset(zIndex);
      marker.addEventListener("click", () => {
        this.vehicleId = data.id;
        this.vehicleSelected(this.vehicleId);
      });
      this.vehicleGroup.addLayer(marker);
    },
    vehicleSelected(vehicleId) {
      this.vehicleId = vehicleId;
      this.getVehicleData();

      let wgs = gps.bd09ToWgs84(
        this.vehicleData.videoLat,
        this.vehicleData.videoLng
      );
      this.map.panTo([wgs.lat, wgs.lng]);

      if (this.vehicleGroup !== null) {
        this.map.removeLayer(this.vehicleGroup);
      }
      this.createMarkerList();

      let timestamp = new Date().getTime();
      this.resetVehicleVideo(timestamp);
    },
    getVehicleData() {
      this.vehicleData = this.vehicleArray.find(item => {
        return item.id === this.vehicleId;
      });
    },
    resetVehicleVideo(timestamp) {
      this.disposeVideojs();
      while (this.vehicleVideoArray.length > 0) {
        this.vehicleVideoArray.pop();
      }
      this.$nextTick(() => {
        for (let i = 0; i < 4; i++) {
          this.vehicleVideoArray.push({
            class: "col col-" + (i + 1),
            id: "vehicle-video-" + (i + 1) + "-" + timestamp,
            src:
              "http://39.100.229.38:6604/hls/1_" +
              this.vehicleData.videoId +
              "_" +
              i +
              "_1.m3u8?JSESSIONID=" +
              this.vehicleJsession
          });
        }
        this.$nextTick(() => {
          this.initVehicleVideo("video-js", timestamp);
        });
      });
    },
    disposeVideojs() {
      this.vehicleVideoInstanceArray.forEach(item => {
        if (item) {
          item.dispose();
        }
      });
      this.vehicleVideoInstanceArray = [];
    },
    initVehicleVideo(className, timestamp) {
      //设置中文
      videojs.addLanguage("zh-CN", {
        Play: "播放",
        Pause: "暂停",
        "Current Time": "当前时间",
        Duration: "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        LIVE: "直播",
        Loaded: "加载完毕",
        Progress: "进度",
        Fullscreen: "全屏",
        "Non-Fullscreen": "退出全屏",
        Mute: "静音",
        Unmute: "取消静音",
        "Playback Rate": "播放速度",
        Subtitles: "字幕",
        "subtitles off": "关闭字幕",
        Captions: "内嵌字幕",
        "captions off": "关闭内嵌字幕",
        Chapters: "节目段落",
        "Close Modal Dialog": "关闭弹窗",
        Descriptions: "描述",
        "descriptions off": "关闭描述",
        "Audio Track": "音轨",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.":
          "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.":
          "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":
          "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.":
          "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.":
          "视频已加密，无法解密。",
        "Play Video": "播放视频",
        Close: "关闭",
        "Modal Window": "弹窗",
        "This is a modal window": "这是一个弹窗",
        "This modal can be closed by pressing the Escape key or activating the close button.":
          "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
        ", opens captions settings dialog": ", 开启标题设置弹窗",
        ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
        ", opens descriptions settings dialog": ", 开启描述设置弹窗",
        ", selected": ", 选择",
        "captions settings": "字幕设定",
        "Audio Player": "音频播放器",
        "Video Player": "视频播放器",
        Replay: "重播",
        "Progress Bar": "进度小节",
        "Volume Level": "音量",
        "subtitles settings": "字幕设定",
        "descriptions settings": "描述设定",
        Text: "文字",
        White: "白",
        Black: "黑",
        Red: "红",
        Green: "绿",
        Blue: "蓝",
        Yellow: "黄",
        Magenta: "紫红",
        Cyan: "青",
        Background: "背景",
        Window: "视窗",
        Transparent: "透明",
        "Semi-Transparent": "半透明",
        Opaque: "不透明",
        "Font Size": "字体尺寸",
        "Text Edge Style": "字体边缘样式",
        None: "无",
        Raised: "浮雕",
        Depressed: "压低",
        Uniform: "均匀",
        Dropshadow: "下阴影",
        "Font Family": "字体库",
        "Proportional Sans-Serif": "比例无细体",
        "Monospace Sans-Serif": "单间隔无细体",
        "Proportional Serif": "比例细体",
        "Monospace Serif": "单间隔细体",
        Casual: "舒适",
        Script: "手写体",
        "Small Caps": "小型大写字体",
        Reset: "重启",
        "restore all settings to the default values": "恢复全部设定至预设值",
        Done: "完成",
        "Caption Settings Dialog": "字幕设定视窗",
        "Beginning of dialog window. Escape will cancel and close the window.":
          "开始对话视窗。离开会取消及关闭视窗",
        "End of dialog window.": "结束对话视窗"
      });

      let videoElements = document.getElementsByClassName(className);
      let videoElementArray = [].concat.apply([], videoElements);

      videoElementArray.forEach(item => {
        if (item.id.indexOf(timestamp) !== -1) {
          let videojsInstance = videojs(item.id, { language: "zh-CN" });
          this.vehicleVideoInstanceArray.push(videojsInstance);
          videojs(item.id).ready(function() {
            this.play();
          });
        }
      });
    },
    getVehicleId() {
      if (this.vehicleId === null) {
        return this.vehicleArray[0].id;
      }
      let inList = this.vehicleArray.some(item => {
        return item.id === this.vehicleId;
      });
      return inList ? this.vehicleId : this.vehicleArray[0].id;
    },
    showVelocity() {
      if (this.velocityShow === 0 && this.velocityData) {
        this.velocityLayer = L.velocityLayer({
          displayValues: true,
          displayOptions: {
            velocityType: "风",
            position: "bottomleft",
            emptyString: "未知",
            angleConvention: "bearingCW",
            displayPosition: "bottomleft",
            displayEmptyString: "未知",
            speedUnit: "m/s"
          },
          data: this.velocityData, // see demo/*.json, or wind-js-server for example data service
          // OPTIONAL
          minVelocity: 0, // 粒子的最小速度  0
          maxVelocity: 10, // 粒子的最大速度  10
          velocityScale: 0.015, // 风速的尺度 || 粒子尾巴长度  0.005
          colorScale: ["#ff0"], // 粒子颜色
          lineWidth: 2, // 线条宽度  1
          particleMultiplier: 1 / 1300, // 粒子密度 1 / 2600
          frameRate: 10, // 每秒所需帧数  10
          onAdd: null, // callback function
          onRemove: null // callback function
        });
        this.velocityLayer.addTo(this.map);
      } else {
        this.map.removeLayer(this.velocityLayer);
      }
      this.velocityShow = 1 - this.velocityShow;
    },
    formatterVehicleState(state) {
      let stateObject = this.vehicleStateArray.find(item => {
        return Number(item.value) === Number(state);
      });
      return stateObject ? stateObject.label : "离线";
    },
    formatterString(string, unit) {
      return string ? string + (unit ? unit : "") : "—";
    },
    formatterWindDirection(angle, speed) {
      return utils.validateWindDirection(angle, speed);
    },
    formatterDirection(wd) {
      let result = "";
      if (wd - 0 > 337.5 || wd - 0 < 22.5) {
        result = "北方";
      } else if (wd - 0 >= 22.5 && wd - 0 <= 67.5) {
        result = "东北方";
      } else if (wd - 0 > 67.5 && wd - 0 < 112.5) {
        result = "东方";
      } else if (wd - 0 >= 112.5 && wd - 0 <= 157.5) {
        result = "东南方";
      } else if (wd - 0 > 157.5 && wd - 0 < 202.5) {
        result = "南方";
      } else if (wd - 0 >= 202.5 && wd - 0 <= 247.5) {
        result = "西南方";
      } else if (wd - 0 > 247.5 && wd - 0 < 292.5) {
        result = "西方";
      } else if (wd - 0 >= 292.5 && wd - 0 <= 337.5) {
        result = "西北方";
      }
      return result;
    },
    intervalGetVehicleList() {
      this.vehicleInterval = setInterval(() => {
        getVehicleList(data => {
          if (data.jsession) {
            this.vehicleJsession = data.jsession;
          }
          if (data.list.length > 0) {
            this.vehicleArray = data.list;
            this.createMarkerList(data);
          }
        });
      }, 60000);
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.disposeVideojs();

    if (this.vehicleInterval) {
      clearInterval(this.vehicleInterval);
      this.vehicleInterval = null;
    }
  }
};
</script>

<style scoped lang="stylus">
#svm
    position relative
    width 100%
    height 100%

    > .row-1
        height 120px

    > .row-2
        height 894px

        > .col-1
            width 2592px
            height 100%

            > .row-1
                height 59px
                padding 30px 0

            > .row-2
                height 775px

                #leaflet
                    position relative
                    top 0
                    left 0
                    width 100%
                    height 100%

                    >>> .leaflet-marker-icon.address
                        > p
                            position relative
                            width 100%
                            height 20px
                            border 1px solid #000
                            background-color #fff
                            border-radius 5px
                            text-align center
                            line-height 20px
                            font-size 12px
                            color #000

                    >>> .leaflet-marker-icon.circle
                        > .container
                            position relative
                            width 16px
                            height 16px
                            border-radius 50%
                            text-align center
                            line-height 30px
                            font-size 14px
                            color #000

                    >>> .leaflet-marker-icon.vehicle
                        > .container
                            position relative
                            border-radius 5px
                            text-align center
                            line-height 28px
                            font-size 20px
                            color #fff

                            > .hornlike
                                position absolute
                                left 45px
                                bottom -10px
                                margin -5px 0 0 5px
                                border-left 5px solid transparent
                                border-right 5px solid transparent
                                border-top 10px solid #ff401a

                            > .hornlike.selected
                                border-top 10px solid #ff401a

                            > .hornlike.online
                                border-top 10px solid #02d334

                            > .hornlike.outline
                                border-top 10px solid #8b8b8b

                        > .container.selected
                            background-color #ff401a

                        > .container.online
                            background-color #02d334

                        > .container.outline
                            background-color #8b8b8b

                    >>> .leaflet-marker-icon.vehicle.selected
                        z-index 400

                    >>> .leaflet-marker-icon.vehicle.online
                        z-index 300

                    >>> .leaflet-marker-icon.vehicle.outline
                        z-index 200

                    >>> .leaflet-popup-content-wrapper
                        color #000
                        background-color rgba(0, 0, 0, 0.8)

                        > .leaflet-popup-content
                            position relative

                            > .container
                                position relative
                                width 482px
                                margin 0 auto
                                color #fff

                                > .row-1
                                    line-height 33px
                                    font-size 16px

                                    > .row
                                        > p
                                            > span.active
                                                color #13ce66

                                            > span.inactive
                                                color #ff4949

                                        > .col
                                            width 241px

                                > .row-2
                                    width 482px
                                    height 360px
                                    background-color #fff

                                    > .col
                                        width 240px

                                        > video
                                            border none
                                            outline none

                                    > .col-1
                                        padding 0 1px 1px 0

                                    > .col-2
                                        padding 0 0 1px 1px

                                    > .col-3
                                        padding 1px 1px 0 0

                                    > .col-4
                                        padding 1px 0 0 1px

                    >>> .leaflet-popup-tip-container
                        > .leaflet-popup-tip
                            background-color rgba(0, 0, 0, 0.8)

                > .velocity
                    position absolute
                    bottom 10px
                    right 10px
                    width 40px
                    height 40px
                    background-color rgba(255, 255, 255, 0.8)
                    border-radius 5px
                    z-index 999

                > .velocity::after
                    content ''
                    position absolute
                    top 0
                    left 0
                    width 40px
                    height 40px
                    background url("../../assets/img/feng.png") no-repeat 5px 5px
                    background-size 30px 30px

                > .velocity.active::after
                    content ''
                    position absolute
                    top 0
                    left 0
                    width 40px
                    height 40px
                    background url("../../assets/img/feng-active.png") no-repeat 5px 5px
                    background-size 30px 30px

        > .col-2
            width 930px
            height 100%

            > .row-1
                height 119px

            > .row-2
                height 775px
                background-color #041845

                > .row-1
                    height 43px
                    padding 32px 15px 32px 55px

                    > p
                        position relative
                        line-height 43px
                        font-size 36px
                        font-weight bold
                        color #fff

                > .row-2
                    height 650px

                    > .row
                        padding-left 55px
                        height 100%

                        >>> .__panel
                            > .__view
                                > .row
                                    height 135px
                                    padding-right 40px

                                    > .row
                                        > .col-2
                                            float right
                                            width 250px
                                            text-align right

                                    > .row::after
                                        content ''
                                        display block
                                        clear both

                                    > .row-1
                                        line-height 60px

                                        > .col-1
                                            padding-top 20px

                                            > p
                                                position relative

                                                > span.license-plate
                                                    float left
                                                    position relative
                                                    padding 0 10px
                                                    font-size 32px
                                                    color #fff

                                                > span.state
                                                    float left
                                                    position relative
                                                    padding 0 10px
                                                    font-size 24px

                                                > span.state.online
                                                    color #02d334

                                                > span.state.outline
                                                    color #8b8b8b

                                                > span.warn
                                                    float left
                                                    position relative
                                                    width 33px
                                                    height 33px
                                                    margin 13px 10px

                                                > span.warn::before
                                                    content ''
                                                    display block
                                                    position absolute
                                                    top 0
                                                    left 0
                                                    width 33px
                                                    height 33px
                                                    background url("../../assets/img/20190718140035.png") no-repeat top left
                                                    background-size 33px 33px

                                            > p::after
                                                content ''
                                                display block
                                                clear both

                                        > .col-2

                                            > p
                                                float right
                                                position relative
                                                margin-top 30px
                                                height 40px
                                                padding 0 23px
                                                background-color #1570c3
                                                border-radius 5px
                                                line-height 40px
                                                font-size 24px
                                                color #fff

                                            > p::after
                                                content ''
                                                display block
                                                clear: both;

                                    > .row-2
                                        line-height 55px
                                        font-size 18px

                                        > .col-1
                                            > p
                                                float left
                                                position relative
                                                padding-left 50px
                                                font-size 22px
                                                color #80a7fc

                                            > p::before
                                                content ''
                                                display block
                                                position absolute
                                                top 12px
                                                left 5px
                                                width 31px
                                                height 31px
                                                background url("../../assets/img/20200526162342.png") no-repeat top left
                                                background-size 31px 31px

                                        > .col-2
                                            > p
                                                float right
                                                position relative
                                                font-size 22px
                                                color #80a7fc
                                                text-align right

                                            > p::after
                                                content ''
                                                display block
                                                clear: both;


                                > .row::after
                                    position absolute
                                    bottom 0
                                    left 0
                                    width 100%
                                    height 1px
                                    background-color #1470c2

                                > .row.active
                                    background-color #030e26

        > .col-3
            width 1768px

            > .row-1
                height 59px
                padding 30px 0

            > .row-2
                height 775px
                background-color #030e26

                > .col-1
                    width 686px
                    height 100%
                    padding 0 60px 0 60px

                    > .row-1
                        padding 30px 0 0

                        > p
                            line-height 48px
                            text-align justify
                            word-wrap break-word
                            word-break break-all
                            white-space normal

                        > p.license-plate
                            font-size 32px
                            color #fff

                        > p.lng-lat
                            position relative
                            padding-left 29px
                            font-size 22px
                            color #80a7fc

                        > p.lng-lat::before
                            content ''
                            display block
                            position absolute
                            top 11px
                            left 0
                            width 19px
                            height 27px
                            background url("../../assets/img/20200420153452.png") no-repeat top left
                            background-size 19px 27px

                    > .row-2
                        padding 10px 0

                        > p
                            line-height 44px
                            text-align justify
                            word-wrap break-word
                            word-break break-all
                            white-space normal

                        > p.text
                            > span
                                float left
                                position relative

                            > span.clock-in
                                padding-left 43px
                                font-size 24px

                            > span.clock-in.forget
                                color #de0000

                            > span.clock-in.active
                                color #02d334

                            > span.clock-in::after
                                content ''
                                display block
                                position absolute
                                top 8px
                                left 0
                                width 33px
                                height 33px

                            > span.clock-in.active::after
                                background url("../../assets/img/20200527100415.png") no-repeat top left
                                background-size 33px 33px

                            > span.clock-in.forget::after
                                background url("../../assets/img/20190718140035.png") no-repeat top left
                                background-size 33px 33px

                            > span.text
                                margin-left 30px
                                font-size 22px
                                color #fff

                        > p.text::after
                            content ''
                            display block
                            clear both

                        > p.warn
                            position relative
                            padding-left 43px
                            font-size 24px
                            color #de0000

                        > p.warn::before
                            content ''
                            display block
                            position absolute
                            top 8px
                            left 0
                            width 33px
                            height 33px
                            background url("../../assets/img/20190718140035.png") no-repeat top left
                            background-size 33px 33px

                    > .row-2::before
                        content ''
                        display block
                        position absolute
                        bottom 0
                        left 43px
                        width 600px
                        height 1px
                        background-color #1470c2

                    > .row-3
                        > .row
                            padding 10px 0

                            > p
                                line-height 44px
                                text-align justify
                                word-wrap break-word
                                word-break break-all
                                white-space normal
                                font-size 24px
                                color #fff

                            > p.text
                                padding-left 43px
                                color #fff

                            > p.warn
                                position relative
                                padding-left 43px
                                color #de0000

                            > p.warn::before
                                content ''
                                display block
                                position absolute
                                top 9px
                                left 0
                                width 33px
                                height 33px
                                background url("../../assets/img/20190718140035.png") no-repeat top left
                                background-size 33px 33px

                        > .row::before
                            content ''
                            display block
                            position absolute
                            bottom 0
                            left 43px
                            width 600px
                            height 1px
                            background-color #1470c2

                > .col-2
                    width 962px

                    > .row
                        width 100%
                        padding-top 27px

                        > .col
                            width 480px

                            > video
                                border none
                                outline none

                        > .col-1
                            padding 0 1px 1px 0

                        > .col-2
                            padding 0 0 1px 1px

                        > .col-3
                            padding 1px 1px 0 0

                        > .col-4
                            padding 1px 0 0 1px
</style>
